<!--
 * @Author: FengTeng
 * @Date: 2021-02-19 20:24:45
 * @LastEditTime: 2021-03-03 12:50:31
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\views\member-info\MemberInfo.vue
-->
<template>
  <div class="member-info" v-if="userPermissions.memberInfo.lookSearch">
    <el-button
      v-if="userPermissions.memberInfo.createRule"
      class="create-info-button"
      type="primary"
      @click="handleCreateRule()"
      >建立规则</el-button
    >
    <member-info-table
      :tableData="memberInfoTableData"
      :columnSet="memberInfoColumnSet"
      :tableConfig="memberInfoTableConfig"
      @page-change="handlePageChange($event)"
      @member-info-detail="handleMemberInfoDetail($event)"
    ></member-info-table>
    <create-rule-modal
      ref="createRuleModalRef"
      :modalConfig="createRuleConfig"
      @refresh-table="requestMemberInfoTableData()"
    ></create-rule-modal>
    <rule-detail-modal
      ref="ruleDetailModalRef"
      :modalConfig="ruleDetailConfig"
      @customer-detail="handleCustomerDetail($event)"
      @refresh-table="requestMemberInfoTableData()"
    ></rule-detail-modal>
    <customer-detail-modal ref="customerDetailModalRef" :modalConfig="customerDetailConfig"></customer-detail-modal>
  </div>
</template>

<script>
import $ from "jquery";
import apis from "@/apis/index.js";
import MemberInfoTable from "@/components/table/member-info-table/MemberInfoTable.vue";
import CreateRuleModal from "@/components/modal/create-rule-modal/CreateRuleModal.vue";
import RuleDetailModal from "@/components/modal/rule-detail-modal/RuleDetailModal.vue";
import CustomerDetailModal from "@/components/modal/customer-detail-modal/CustomerDetailModal";
import { mapState } from "vuex";
export default {
  name: "MemberInfo",
  components: {
    MemberInfoTable,
    CreateRuleModal,
    RuleDetailModal,
    CustomerDetailModal
  },
  data() {
    return {
      memberInfoTableData: [],
      memberInfoColumnSet: [
        {
          label: "序号",
          prop: "id",
          align: "center"
        },
        {
          label: "画像内容",
          prop: "info",
          width: "340",
          align: "center"
        },
        {
          label: "客户数量",
          prop: "number",
          align: "center"
        },
        {
          label: "优惠",
          prop: "sale",
          align: "center"
        },
        {
          label: "满减",
          prop: "reduction",
          align: "center"
        },
        {
          label: "赠送",
          prop: "present",
          align: "center"
        },
        {
          label: "操作",
          prop: "option",
          customSlot: "customSlot",
          align: "center"
        }
      ],
      memberInfoTableConfig: {
        // 分页配置
        pageConfig: {
          page: 1,
          pageSize: 10,
          total: 0
        }
      },
      createRuleConfig: {
        visible: false,
        CloseOnClickModal: false,
        showClose: true
      },
      ruleDetailConfig: {
        visible: false,
        CloseOnClickModal: false,
        showClose: true
      },
      customerDetailConfig: {
        visible: false,
        CloseOnClickModal: false,
        showClose: true
      }
    };
  },
  computed: {
    ...mapState({
      userPermissions: state => state.permissionModule.permissions
    })
  },
  created() {
    this.initMemberInfoTable();
  },
  methods: {
    initMemberInfoTable() {
      this.requestMemberInfoTableData();
    },
    requestMemberInfoTableData() {
      console.log("调接口");
      let that = this;
      $.post(
        apis.getMemberInfoTableDataApi,
        {
          pageIndex: this.memberInfoTableConfig.pageConfig.page,
          pageSize: this.memberInfoTableConfig.pageConfig.pageSize,
          type: "paging"
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            that.setMemberInfoTableData(resp);
            that.memberInfoTableConfig.pageConfig.total = resp.data.total;
          } else {
            this.$message.error(resp.msg);
          }
        }
      );
    },
    setMemberInfoTableData(resp) {
      console.log(resp);
      this.memberInfoTableData = [];
      resp.data.tableData.forEach(item => {
        let row = {
          id: "",
          time: "",
          expendTotal: "",
          number: "",
          sale: "",
          reduction: "",
          present: ""
        };
        row.id = item.id;
        row.time = item.time;
        row.expendTotal = item.xiaofeijine;
        row.number = item.number;
        row.sale = item.youhui;
        row.reduction=item.manjian;
        row.present = item.zengsong;
        this.memberInfoTableData.push(row);
      });
      this.memberInfoTableData.forEach(item => {
        item.sale = item.sale === "" ? "-" : item.sale;
        item.reduction = item.reduction === "" ? "-" : item.reduction;
        item.present = item.present === "" ? "-" : item.present;
        item.info = "首次消费时间" + item.time + "个月以上，消费" + item.expendTotal;
        item.option = "查看详情";
      });
    },
    handleCreateRule() {
      console.log("建立新规则");
      this.$refs.createRuleModalRef.openModal();
    },
    handlePageChange(event) {
      console.log(" 分页器", event);
      this.memberInfoTableConfig.pageConfig.page = event;
      this.requestMemberInfoTableData();
    },
    handleMemberInfoDetail(event) {
      console.log("规则信息", event);
      this.$refs.ruleDetailModalRef.openModal(event);
    },
    handleCustomerDetail(event) {
      this.$refs.customerDetailModalRef.openModal(event);
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
